@import "../../sassmixins/mixins";

html {
  @include square(100%);
  //overflow: hidden;
}

body {
  height: 100%;
  .outer {
    font-size: 1rem;
    background-image: url("../image/toplist-bg.jpg");
    background-size: 100% 100%;
    min-height: 100%;
    overflow: hidden;
    width: 10em;
    position: relative;
    min-width: 10rem;
    .container {
      @include size(px2em(750px), px2em(1206px));
      @include center-block;
      position: relative;

      > .word {
        background-image: url("../image/word.png");
        background-size: 100% 100%;
        @include size(px2em(750px), px2em(181px));
      }

      .buycart {
        @include center-block;
        background-size: 100% 100%;
        margin-top: px2em(-40px);
      }

      .user-list {
        margin-top: px2em(50px);
        @include box-sizing;
        border: px2em(8px) solid #95deeb;
        width: px2em(544px);
        @include center-block;
        padding: px2em(20px) 0 px2em(20px) px2em(20px);
        border-radius: px2em(10px);
        background-color: rgba(255, 255, 255, .3);
        position: relative;
        overflow: hidden;

        #wrapper {
          @include box-sizing;
          width: 100%;
          padding-right: px2em(54px);
          overflow: hidden;
          position: relative;
          height: 100%;
          #scroller {
            > .word {
              height: px2em(45px);
              background-color: #ffffff;
              background-image: url("../image/top-word.png");
              background-size: 100% 100%;
              border-radius: px2em(10px);
              text-align: center;
              line-height: px2em(45px);
              margin-top: 16px;
              span {
                font-size: px2em(32px);
                color: #00739f;
                display: block;
                font-weight: bold;
              }
            }
            > .block {
              height: px2em(16px);
            }
            > .item {
              height: px2em(100px);
              padding-left: px2em(38px);
              border-bottom: px2em(2px) dashed #ffffff;
              position: relative;

              .header {
                position: absolute;
                left: px2em(38px);
                top: px2em(13px);
                @include square(px2em(70px));
                border: px2em(4px) solid #ffffff;
                border-radius: px2em(10px);
                background-size: 100% 100%;
              }

              .name {
                color: #ffffff;
                line-height: 1;
                position: absolute;
                left: px2em(141px);
                border-bottom: 1px solid #ffffff;
                max-width: px2em(315px);
                @include text-overflow(1);
                span {
                  @include font-dpr(15px);
                }
              }
            }
          }
        }
      }
    }

    .container.p-1 {
      .buycart {
        background-image: url("../image/prize-1.png");
        @include size(px2em(401px), px2em(266px));
      }

      .user-list {
        height: px2em(682px);
      }
    }

    .container.p-2 {
      .buycart {
        background-image: url("../image/prize-2.png");
        @include size(px2em(401px), px2em(273px));
      }

      .user-list {
        height: px2em(675px);
      }
    }

    .container.p-3 {
      .buycart {
        background-image: url("../image/prize-3.png");
        @include size(px2em(401px), px2em(388px));
      }

      .user-list {
        height: px2em(562px);
      }
    }
  }
}

.iScrollVerticalScrollbar {
  position: absolute;
  z-index: 9999;
  width: px2em(60px);
  bottom: px2em(2px);
  top: px2em(2px);
  right: px2em(2px);
  overflow: hidden;
  background-image: url("../image/scroll-bg.png");
  background-size: 100% auto;
}

.iScrollVerticalScrollbar.iScrollBothScrollbars {
  bottom: 18px;
}

.iScrollIndicator {
}

.iScrollVerticalScrollbar .iScrollIndicator {
  background-image: url("../image/sc.png");
  background-size: 100% 100%;
  @include size(px2em(25px), px2em(29px));
  @include center-block;
}


